<template>
  <div>
    <!--条件查询-->
    <el-row>
      <el-col :span="span">
        <el-card header="用户列表">

          <!--输入框-->
          <el-form :inline="true">
            <el-form-item label="用户名称">
              <el-input
                  v-model="userName"
                  placeholder="名称"
                  clearable>
              </el-input>
            </el-form-item>

            <!--搜索-->
            <el-form-item>
              <el-button icon="el-icon-search" @click="getUserList">搜索</el-button>
            </el-form-item>
          </el-form>

        </el-card>
      </el-col>
    </el-row>


    <el-row>
      <el-col span="24">
        <el-card>
          <el-header style="background-color: #ffffff">
            <el-button icon="el-icon-circle-plus-outline" type="danger">用户来自于微信登录,不需要自行添加</el-button>
          </el-header>
          <el-table
              :data="tableData"
              style="width: 100%">
            <el-table-column
                type="index"
                width="100"
                label="编号" sortable>
            </el-table-column>

            <el-table-column
                width="150"
                label="图片">
              <template v-slot="scope">
                <img :src="scope.row.userPhoto" alt="" width="90" height="90" style="border-radius: 10px" @click="updatePhoto(scope.row)">
              </template>
            </el-table-column>

            <el-table-column
                prop=""
                width="150"
                label="详情信息">
              <template v-slot="scope">
                <el-button size="mini" @click="toUserInfo(scope.row)">详情</el-button>
              </template>
            </el-table-column>

            <el-table-column
                prop="userName"
                label="姓名">
            </el-table-column>

            <el-table-column
                width="100"
                prop="userSex"
                label="性别">
            </el-table-column>

            <el-table-column
                prop="userBrith"
                label="生日">
            </el-table-column>

            <el-table-column
                prop="loveStyle"
                label="喜欢类型">
            </el-table-column>

            <el-table-column label="操作" width="230">
              <template slot-scope="scope">
                <el-button
                    icon="el-icon-edit"
                    size="mini"
                    @click="getUserInfo(scope.row)">编辑</el-button>
                <el-popconfirm
                    :title="('确认删除'+scope.row.userName+'这个用户吗?')"
                    @confirm="handleDelete(scope.row)"
                >
                  <el-button
                      style="margin-left: 20px"
                      icon="el-icon-delete"
                      size="mini"
                      type="danger"  slot="reference">删除</el-button>
                </el-popconfirm>

              </template>
            </el-table-column>

          </el-table>

        </el-card>
      </el-col>
    </el-row>

    <!--分页-->
    <div class="block">
      <span class="demonstration">显示总数</span>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="current"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

  <!--新增-->
    <el-dialog title="用户信息编辑" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="user.userName" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户性别" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="user.userSex" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户电话" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="user.userTelephone" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户邮箱" :label-width="formLabelWidth">
          <el-input type="email" autocomplete="off" v-model="user.userEmail" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户简介" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="user.userIntroduce" clearable></el-input>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="用户生日">
          <el-date-picker
              v-model="user.userBrith"
              type="date"
              placeholder="选择日期"
              >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="用户住址" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="user.userAddress" clearable></el-input>
        </el-form-item>
        <el-form-item label="用户类型" :label-width="formLabelWidth">
          <el-select v-model="user.loveStyle" clearable placeholder="请选择">
            <el-option
                v-for="item in options"
                :key="item"
                :label="item"
                :value="item"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdate">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="用户图片编辑" :visible.sync="dialogPhoto">
      <el-upload
          class="upload-demo"
          drag
          action="http://124.221.244.228:8089/upload"
          multiple
          :on-success="onSuccess">
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      </el-upload>
    </el-dialog>

    <el-dialog title="用户详情" :visible.sync="dialogInfo">
      <el-descriptions class="margin-top" :column="4" direction="vertical" border>
        <el-descriptions-item label="用户头像">
          <img :src="user.userPhoto" style="height: 70px;width: 70px;border-radius: 10px">
        </el-descriptions-item>
        <el-descriptions-item label="用户名">{{ user.userName }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{ user.userSex }}</el-descriptions-item>
        <el-descriptions-item label="邮箱">{{ user.userEmail }}</el-descriptions-item>
        <el-descriptions-item label="生日">{{ user.userBrith }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{ user.userTelephone }}</el-descriptions-item>
        <el-descriptions-item label="居住地" :span="2">{{ user.userAddress }}</el-descriptions-item>
        <el-descriptions-item label="喜欢类型" :span="2">{{user.loveStyle}}</el-descriptions-item>
        <el-descriptions-item label="备注">
          {{user.userIntroduce}}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "user",
  data() {
    return {
      userName: '', //用户名称
      current: 1, //当前页面
      size: 5, //每页显示条数
      tableData:[], //列表信息
      total:0, //总数
      dialogFormVisible:false, //编辑页面的打开或关闭
      user:{}, //点击编辑页面请求的数据
      formLabelWidth:"120px", //编辑页面距离
      options:["民谣","轻音乐","流行","说唱","爵士","摇滚"], //编辑页面
      UpdateuserId:0, //要修改的用户iD
      dialogPhoto:false,
      userPhoto:'',
      dialogInfo:false, //详情弹窗
      span:24,
    }
  },
  created() {
    this.getUserList()
  },
  methods:{
    getUserList(){
      this.$http.get("/user/findUser",{
        params:{
          current: this.current,
          size: this.size,
          userName: this.userName,
        }
      }).then(res=>{
        this.tableData = res.data.data.records
        this.size = res.data.data.size
        this.current = res.data.data.current
        this.total = res.data.data.total
      })
    },
    getUserInfo(res){
      this.dialogFormVisible = true
      this.UpdateuserId = res.userId
      this.$http.get("/user/findUserById",{
        params:{
          userId:res.userId
        }
      }).then(res=>{
        this.user=res.data.data
      })
    },
    submitUpdate(){
      this.dialogFormVisible = false
      this.$http.post("/user/updateUser2",
        {
          userName:this.user.userName,
          userSex:this.user.userSex,
          userTelephone:this.user.userTelephone,
          userEmail:this.user.userEmail,
          userIntroduce:this.user.userIntroduce,
          userBrith:this.user.userBrith,
          userAddress:this.user.userAddress,
          loveStyle:this.user.loveStyle,
          userId:this.UpdateuserId
      }).then(res=>{
        setTimeout(()=>{
          history.go(0)
        },1000)

        if(res.data.code===200){
          this.open2()
        }else{
          this.open3()
        }
      })
    },
    open2(){
      this.$message({
        message: '修改成功',
        type: 'success'
      });
    },
    open3() {
      this.$message({
        message: '修改失败',
        type: 'warning'
      });
    },
    updatePhoto(item){
      this.dialogPhoto = true
      this.userId = item.userId
    },
    onSuccess(res){
      console.log(res)
      this.userPhoto = res.data
      this.$http.get("/user/updatePhoto",{
        params:{
          userPhoto:this.userPhoto,
          userId:this.userId
        }
      }).then(res=>{
        setTimeout(()=>{
          history.go(0)
        },1000)

        if(res.data.code===200){
          this.open2()
        }else{
          this.open3()
        }
      })
    },
    handleDelete(row){
      this.$http.get("/user/deleteUserById",{
        params:{
          userId:row.userId
        }
      }).then(res=>{
        setTimeout(()=>{
          history.go(0)
        },1000)

        if(res.data.code===200){
          this.open2()
        }else{
          this.open3()
        }
      })
    },
    toUserInfo(row){
      console.log(row)
      this.dialogInfo = true;
      this.$http.get("/user/findUserById",{
        params:{
          userId:row.userId
        }
      }).then(res=>{
        this.user=res.data.data
      })
    },
    handleSizeChange(res){

    },
    handleCurrentChange(res){
      this.current = res
      this.getUserList()
    }
  },

}
</script>

<style scoped>
.block{
  margin-top: 20px;
  text-align: center;
}
</style>